<template>
    <div class="viewport">
        <topTitle :title="title"></topTitle>
        <div class="userAddress-lists">
            <div class="empty" style="display:none;">
            <img src="@/assets/img/img_empty_address.png" alt="">
            </div>
            <ul class="addressList">
                <li>
                    <div class="user-address clearfix">
                        <div class="address-l" data-addressid="6131184055200173">
                            <p class="name clearfix">
                            <label>李阙艾</label>
                            <span>13924368168</span>
                            <span class="default">默认</span>
                            </p>
                            <p class="addr">
                            <span>宁海里二期小区243号</span>
                            </p>
                        </div>
                        <div class="address-r">
                            <a class="editAddress" href="javascript:;" data-value="6131184055200173">编辑</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import TopTitle from '@/components/web/public/TopTitle'
export default {
    name:"userAddress",
    data(){
        return{
            title:"收货地址"
        }
    },
    components:{
        topTitle:TopTitle
    }
}
</script>
<style>
.userAddress-lists {
    margin-top: 0.88rem;
}
.userAddress-lists .empty {
    padding-top: 1.6rem;
    text-align: center;
}
.userAddress-lists .empty img {
    width: 3.26rem;
    height: 5.34rem;
}
.userAddress-lists > ul > li .user-address {
    position: relative;
    padding: .32rem 0 .2rem .32rem;
    background-color: #fff;
    border-bottom: 1px solid #F2F2F2;
}
.userAddress-lists > ul > li .user-address .address-l {
    width: 6rem;
}
.userAddress-lists > ul > li .user-address .address-l .name {
    font-size: .38rem;
    color: #000;
}
.userAddress-lists > ul > li .user-address .address-l .name label {
    float: left;
    max-width: 2rem;
    margin-right: .16rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.userAddress-lists > ul > li .user-address .address-l .name span {
    float: left;
}
.userAddress-lists > ul > li .user-address .address-l .name .default {
    margin-top: .03rem;
    margin-left: .16rem;
    width: .84rem;
    height: .44rem;
    line-height: .44rem;
    font-size: .26rem;
    text-align: center;
    color: #68B52E;
    border: 1px solid #68B52E;
    border-radius: 2px;
}
.userAddress-lists > ul > li .user-address .address-l .addr {
    margin-top: .2rem;
    width: 100%;
    font-size: .26rem;
    color: #424242;
    overflow: hidden;
}

.userAddress-lists > ul > li .user-address .address-r {
    position: absolute;
    top: 50%;
    right: 0;
    height: .68rem;
    margin-top: -0.34rem;
}
.userAddress-lists > ul > li .user-address .address-r a {
    display: block;
    width: 1.16rem;
    height: .68rem;
    line-height: .68rem;
    font-size: .26rem;
    color: #666;
    text-align: center;
    border-left: .04rem solid #F2F2F2;
}
</style>
